

import "/static/eui/vue.js"; /**放在前面，不然在加载其他依赖vue 组件是会报错 */

import { httpUtils, utils } from '/static/api/api.js';
import { spice } from '/static/api/spice.js';
import { vnc } from '/static/api/vnc.js';
import "/static/eui/index.js";

function mounted() {
    let vue = this
    /**连接前 */
    function connect_before() {
        vue.loading = true;
    }
    /**连接完成事件 */
    function connect_after(){
        setTimeout(()=>{
            vue.loading = false;
        },500)
    }
    /**spice 结束事件 */
    function spice_disconnect() {
        vue.mouseRightMenuShow = false;
        if( vue.display == "spice"){
            vue.loading = false;
            vue.display = ""
        }
    }
    /**vnc 结束事件 */
    function vnc_disconnect(){
        vue.mouseRightMenuShow = false;
        if( vue.display == "vnc"){
            vue.loading = false;
            vue.display = ""
        }
    }

    this.spice = new spice(connect_before, connect_after, spice_disconnect);
    this.vnc = new vnc(connect_before, connect_after, vnc_disconnect);

    var sp = window.location.href.split("#");
    if(sp.length == 2){
        this.router = sp[1];
        if(this.router == "user"){
            this.disconnect()
            this.flushUserList()
        }
    }
}

function destroyed() {
    this.disconnect();
}

new Vue({
    /** 变量绑定符号 */
    delimiters: ['[[', ']]'],
    /** 指定vue app 的对象*/
    el: '#app',
    mounted: mounted,
    destroyed: destroyed,
    /** 变量 */
    data: function () {
        return {
            createHostPage: false,
            userForm: {
                username: "",
                name: "",
                password: "",
                role: "",
                phone: "",
                org: "",
                email: "",
            },
            /**用户会话框 */
            addUserDialog: false,
            act: "True",
            groupList: [{
                id: 1,
                label: '区域分组',
                children: [{
                    id: 2,
                  label: '地域分组',
                  children: [{
                    id: 3,
                    label: '城镇分组',
                    children: [{
                        id: 4,
                        label: '家庭分组',                  
                      }]
                  }]
                }]
            }],
            fullscreenLoading: false,
            userList: [],
            router: "host",
            display: "",
            loading: false,
            select_event: null,
            /** spice */
            spice: null,
            vnc: null,
            /** 鼠标右键显示 */
            mouseRightMenuShow: false,
            mouseRightMenuStyle: {
                left: '0px',
                top: '0px',
                width: "205px",
                position: 'absolute',
                zIndex: 9,
                borderRadius: '5px',
            },
            /** 主机栏是否显示 */
            hostBarShow: true,
            /** 主机栏大小 */
            hostBar: "399px",
            /** 主机操作栏控制按钮样式 */
            hostOperationStyle: {
                position: 'absolute',
                opacity: 0.6,
                zIndex: 9,
                width: this.hostBar,
                /** 操作按钮位置 */
                right: '5px',
                bottom: '1px',
                userSelect: 'none',
            }
        }
    },
    /** 方法 */
    methods: {   
        delUser(e){
            console.log(e.row)
            httpUtils().http("/delUser/" +  "?id="+e.row.pk, {method: 'DEL'}, (data)=>{
                console.log(data)
                this.flushUserList()
            })
        },  
        hostButtonOper(e){
            let node = e.target;
            node = node.getAttribute("code") == null ? node = node.parentElement : node ;
            let code = node.getAttribute("code")
            let host = node.parentElement.parentElement.parentElement.parentElement.getAttribute("name");
            if(code == "connect"){
                let protocol = node.parentElement.parentElement.parentElement.parentElement.getAttribute("protocol")
                let connect = protocol == "vnc" ? this.vnc : this.spice;
                this.disconnect();
                connect.connect(host)
                this.display  = protocol;
            }
            console.log(node.getAttribute("code")+host)
        },
        setUserList(data){
            this.userList = data
        },
        flushUserList(){
            this.flushUser = !this.flushUser; 
            httpUtils().http("/userList" +  "/", {method: 'GET'}, this.setUserList);
            this.router = "user";
            window.location.href = window.location.href.split("#")[0]+"#"+this.router
        },
        toPath(e){
            var cmd = e.target.getAttribute("path")
            this.router = cmd
            window.location.href = window.location.href.split("#")[0]+"#"+cmd
            window.location.reload()
        }
        ,
        chRouter(cmd){
            this.router = cmd
            window.location.href = window.location.href.split("#")[0]+"#"+cmd
            window.location.reload()
        },
        disconnect: function(){
            this.hostBarShow = true;
            this.vnc.disconnect();
            this.spice.disconnect();
            this.displayOpen = false;
            this.display = ''
        },
        fullScreen: (event)=>{
            event.preventDefault();
            utils().fullScreen();
            
        },
        resizeWindow: function(){
            utils().center(document.getElementsByTagName("body")[0], document.getElementById("display"));
        },
        operationClick: function (event) {
            let host = this.select_event.getAttribute("name")
            let protocol = this.select_event.getAttribute("protocol")
            let operation = event.target.id;
            if (operation == "connect") {
                if(protocol == "vnc"){
                    /** 使用vnc协议连接 */
                    this.disconnect();
                    this.vnc.connect(host);
                    this.display  = 'vnc';
                }else{
                    /**使用spice 协议连接 */
                    this.disconnect();
                    this.spice.connect(host);
                    this.display  = 'spice';
                }
            }  else {
                let clone = ''
                if (operation == 'clone'){
                    clone = "&target="+prompt("克隆虚拟机名称", host+"_clone")
                }
                httpUtils().http(
                    "/virt/domain/" + operation + "/", {
                        method: 'POST',
                        credentials: 'include',
                        headers: new Headers({
                            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                        }),
                        body: "name=" + host+clone
                    }, function (data) {
                        if (data.status == 'ok') {
                            alert("操作成功")
                        } else {
                            alert("操作成功")
                        }
                        return true;
                    }
                )
            }
        },
        /** 主机操作状态栏控制开关 */
        hostOperation: function (event) {
            let display = document.getElementById("display")
            if (this.hostBarShow) {
                display.classList.add("desktop_all")
                display.classList.remove("edit_bar")
                utils().center(document.getElementsByTagName("body")[0], display);
                window.addEventListener("resize", this.resizeWindow);
            } else {
                display.classList.add("edit_bar")
                display.classList.remove("desktop_all")
                display.style.top = '86px';
                display.style.left = '411px';
                window.removeEventListener("resize", this.resizeWindow);
            }
 
            this.hostBarShow = !this.hostBarShow;
        },
        /**取消右键点击事件*/
        resetRightClick: function (event) {
            // event.preventDefault();
        },
        /**操作主机双击*/
        rightClick: function (event) {
            if (this.select_event != null) {
                this.select_event.classList.remove("activity_select_host");
            }
            this.select_event = event.target.parentElement.parentElement
            if (this.select_event == null) {
                return
            }
            this.act = this.select_event.getAttribute("act")
            this.select_event.classList.add("activity_select_host");
            screenY = event.target.parentElement.parentElement.parentElement.parentElement.scrollTop;
            this.mouseRightMenuStyle.left = event.pageX - 15 + "px";
            this.mouseRightMenuStyle.top = event.pageY - 86 + screenY + "px";
            this.mouseRightMenuShow = true;
            console.log(event.target.parentElement.parentElement.parentElement.getAttribute("name"))
            event.preventDefault();
        },
        /** 鼠标离开功能菜单 */
        mouseRightMenuLeave: function () {

            if (this.select_event != null) {
                this.select_event.classList.remove("activity_select_host");
            }
            this.select_event = null;
            this.mouseRightMenuShow = false;
        },
        child_menu_in: function (event){
            event.target.children[0].style.display = ""
            console.log("in")
            console.log(event)
        },
        child_menu_out: function (event){
            event.target.children[0].style.display = "none"
            console.log("out")
            console.log(event)
        },
        loVNC: function(){
            this.display = "vnc";
            this.spice.disconnect()
            this.vnc.connect("vnc")
        }
    }
});
